<style scoped>
    .wraper {
        padding: 0 30px;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }

    .detail {
        border-top: 1px dashed #cccccc;
    }

    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
        height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }

    .red-font {
        color: #ff1f1f;
    }

    /* 分页 start */

    .page {
        margin: 20px 0;
    }

    .ivu-page {
        padding-bottom: 150px;
    }

    /* 分页 end */

    .fixed-bottom {
        padding-left: 20px;
        padding-right: 20px;
        height: 80px;
        line-height: normal !important;
        position: fixed;
        left: 210px;
        right: 0;
        bottom: 0;
        z-index: 999;
        text-align: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
    }

    .sidehide {
        left: 75px;
    }
</style>
<style>
    .noborder label.ivu-form-item-label {
        border: none;
        background: transparent;
    }
    .showAddModal.common-box-body .ivu-modal-body .ivu-form-item label{
        text-align:center;
    }
</style>

<template>
    <div class="employee-manage">
        <product-title></product-title>

        <div class="wraper">
            <Row class="mb10">
                <Col :md="24" :lg="24">
                <Button type="success" size="large" class="fr mg10 tRight" @click="createPro">新增</Button>
                </Col>
            </Row>
            <div class="detail ">
                <div class="headline">

                </div>
                <div class="clearfix mb30">
                    <div class="table-theme highlight_table">
                        <Table ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns_rank"
                            :data="data_rank"></Table>
                    </div>
                </div>
            </div>
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide'">
            <Row class="pro-pagesize">
                <Col :md="24" :lg="12">
                <Button type="primary" :disabled="tableaction" size="large" class="fl mr10" @click="toDetail">编辑</Button>
                <Button type="error" :disabled="tableaction" size="large" class="fl mr10 " @click="remove">删除</Button>
                </Col>
            </Row>
        </div>
        <Modal v-model="showAddModal" ok-text="提交" :mask-closable='closeable' width="600" title="职级规则" class-name="common-box-body showAddModal">
            <Row>
                <Col>
                <Form :model="rank" ref="rank" :rules="ruleValiRank">
                    <Form-item label="职级名称" prop="name" required>
                        <Input placeholder="请输入职级名称" v-model="rank.name"></Input>
                    </Form-item>
                    <Form-item label="职级别名" prop="alias">
                        <Input placeholder="请输入职级别名" v-model="rank.alias"></Input>
                    </Form-item>
                    <Form-item label="职级" prop="level">
                        <Select filterable placeholder="请选择职称" v-model="rank.level" :transfer=true>
                            <Option value="1">1</Option>
                            <Option value="2">2</Option>
                            <Option value="3">3</Option>
                            <Option value="4">4</Option>
                            <Option value="5">5</Option>
                            <Option value="6">6</Option>
                            <Option value="7">7</Option>
                            <Option value="8">8</Option>
                            <Option value="9">9</Option>
                            <Option value="10">10</Option>
                        </Select>
                        <span style="color:red;">提示:数字越大就说明等级越高</span>
                    </Form-item>
                </Form>
                </Col>
            </Row>
            <div slot="footer" :md="24" :lg="8">
                <Button style="width:60px;" type="primary" size="small" @click="cancel">取消</Button>
                <Button style="width:60px;" class="tRight" type="success" size="small" long @click="add">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import {
        get_rank,
        add_rank,
        del_rank,
        detail_rank,
        update_rank
    } from '../../api/rule.js'
    import util from '../../libs/util.js';
    export default {
        data() {
            return {
                id: "",
                closeable: false, //shif按ese按钮退出
                showAddModal: false, //点击设置,弹出模态框
                rank: {
                    name: '',
                    alias: '',
                    level: '',
                },
                tableaction: true,
                columns_rank: [{
                        type: 'index',
                        title: '序号',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '职级名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '职级别称',
                        key: 'alias',
                        align: 'center',
                    },
                    {
                        title: '职级',
                        key: 'level',
                        align: 'center',
                        // render: (h, params) => {
                        //     return h("div", params.row.leader == 1 ? '是' : '否');
                        // }
                    },
                ],
                data_rank: [],
                ruleValiRank: {
                    name: [{
                        required: true,
                        message: '职级名称是不能为空的',
                        trigger: 'blur,change'
                    }],
                    alias:[],
                    level:[],
                },
            }
        },
        components: {
            productTitle
        },
        computed: {
            slidetoggle() {
                return this.$store.state.sildeshow
            },
        },
        created() {

        },
        mounted() {
            this.getList()
        },
        methods: {
            // 选中表单的其中一项,进行数据删除处理
            //选中当前行数据
            tableCurrentChange(currentRow, oldCurrentRow) {
                this.tableaction = false;
                this.current = currentRow;
                console.log(this.current, '当前数据信息')
                this.id = currentRow.id;
                console.log(this.id,'...id')
            },
            createPro() {
                this.showAddModal = true;
                this.id = '';
            },
            // 获取职级列表
            getList() {
                new Promise((resolve, reject) => {
                    get_rank().then(response => {
                        console.log(response.data);
                        if (response.data.err == 0) {
                            this.data_rank = response.data.data;
                            this.tableaction = true;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            add() {
                var _this = this;
                _this.$refs['rank'].validate((valid) => {
                    if (valid) {
                        if (_this.id&&_this.id!='') {
                            var url = BASE_URL1+'/kb/v1/rank/' + this.id;
                            // let form  = Object.assign({},this.rank);
                            var form = JSON.stringify(_this.rank);
                            util.ajax.put(url, form, {
                                    headers: {
                                        'Content-Type': 'application/json; charset=UTF-8'
                                    }
                                })
                                .then(function (res) {
                                    if (res.data.err == 0) {
                                        _this.showAddModal = false;
                                        _this.$Message.success('修改成功');
                                        _this.$refs["rank"].resetFields();
                                        _this.getList()
                                    } else {
                                        _this.$Message.error(res.data.description);
                                    }
                                })
                                .catch((res) => {})
                        } else {
                            new Promise((resolve, reject) => {
                                var form = JSON.stringify(_this.rank);
                                console.log(typeof form,'.........',form)
                                add_rank(form).then(response => {
                                    if (response.data.err == 0) {
                                        this.showAddModal = false;
                                        this.$refs["rank"].resetFields();
                                        this.$Message.success('新增成功');
                                        this.getList()
                                    } else {
                                        _this.$Message.error(response.data.description);
                                    }
                                    resolve();
                                }).catch(error => {
                                    reject(error);
                                });
                            });
                        }
                    }
                })
            },
            cancel() {
                this.showAddModal = false;
                this.$refs["rank"].resetFields();
            },
            remove() {
                var _this = this;
                _this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        var url = BASE_URL1+'/kb/v1/rank/' + _this.id
                        util.ajax.delete(url, {})
                            .then(function (res) {
                                if (res.data.err == 0) {
                                    _this.$Message.success('删除成功');
                                    _this.getList();
                                    _this.tableaction = false;
                                }
                            })
                            .catch((res) => {
                                console.log('删除操作失败!')
                            })
                    },
                });
            },
            toDetail() {
                var _this = this;
                var url = BASE_URL1+'/kb/v1/rank/type/' + _this.id
                util.ajax.get(url)
                    .then(function (res) {
                        if (res.data.err == 0) {
                            _this.showAddModal = true;
                            var datas = JSON.parse(JSON.stringify(res.data.data))
                            _this.rank.name = datas.name;
                            _this.rank.alias = datas.alias;
                            _this.rank.level = datas.level.toString();
                            console.log(_this.rank)
                        } else {
                            this.$Message.error('获取数据失败');
                            _this.showAddModal = false;
                        }
                    })
                    .catch((res) => {
                        _this.showAddModal = true;
                    })
            },
        }
    }
</script>